<div class="selector-wrapper">
    <div class="title-wrapper">
        <span class="title skin-color">筛选查询</span>
        <ng-container *ngIf="_selectorGen?.btnPosition === 'topRight'">
            <button nz-button class="query-button-top-right" [class.full]="isCollapse" nzType="primary"
                    (click)="execQuery()">
                查询结果
            </button>
        </ng-container>
        <div class="collapse-controller skin-color" (click)="toggleCollapse()">
            <span>{{isCollapse ? '展开筛选' : '收起筛选'}}</span>
            <i nz-icon [type]="isCollapse ? 'down' : 'up'" theme="outline"></i>
        </div>
    </div>
    <div class="selector-table {{isCollapse ? 'collapse' : 'expand'}}">
        <!--*ngFor="let selectorGroup of splitSelector;let index = index;"-->
        <div class="selector-row">
            <ng-container *ngFor="let selectorItem of _selectorGen.selectorArr;let index = index;">
                <ng-container *ngIf="selectorItem.type === 'customerCascaderMultiple';else normalSelelctorTpl">
                    <kylin-cascader-multiple-selector ngDefaultControl
                                                      [splitScale]="splitScale"
                                                      [options]="selectorItem.cascaderOptions"
                                                      [type]="selectorItem.cascaderType"
                                                      [(ngModel)]="selectorItem.value">
                    </kylin-cascader-multiple-selector>
                </ng-container>
                <ng-template #normalSelelctorTpl>
                    <!--<div  nz-col [nzSpan]="24/splitScale" class="{{'selector-col' + ' selector-col-'+ classCover}}">-->
                    <!--nz-col [nzSpan]="24/splitScale"-->
                    <div [ngStyle]="{'width': (100/splitScale + '%')}"
                         [ngClass]="{'selector-col' : true,'selector-col-cover1':classCover === 'cover1','selector-col-cover2':classCover === 'cover2'}">
                        <div class="title title-cover">{{selectorItem.label}}：</div>
                        <div class="input-box input-box-cover" [ngSwitch]="selectorItem.type">
                            <div class="input-position">
                                <input *ngSwitchCase="'text'"
                                       class="input-item"
                                       nz-input
                                       [placeholder]="selectorItem?.placeholder  || ('请输入' + selectorItem.label) || ''"
                                       [(ngModel)]="selectorItem.value"/>
                                <nz-select *ngSwitchCase="'dropdown'"
                                           nzAllowClear="true"
                                           style="width:100%"
                                           class="input-item"
                                           [nzPlaceHolder]="selectorItem?.placeholder  || ('请选择' + selectorItem.label) || ''"
                                           [nzShowSearch]="selectorItem?.showSearch"
                                           (nzOpenChange)="renderOptions(selectorItem)"
                                           [nzDropdownMatchSelectWidth]="false"
                                           [(ngModel)]="selectorItem.value">
                                    <ng-container *ngIf="isArray(selectorItem.dataSource)">
                                        <nz-option *ngFor="let dataItem of selectorItem.dataSource"
                                                   [nzLabel]="dataItem.label"
                                                   [nzValue]="dataItem.value">
                                        </nz-option>
                                    </ng-container>
                                    <!-- TODO 下拉选数据太多会导致页面卡顿，处理方式，点击展开后再渲染，加渲染动画后替换上面代码-->
                                    <!--<ng-container *ngIf="selectorItem?.hexOpen || selectorItem.selectedIdx + '' !== 'undefined'">
                                        <nz-option *ngFor="let dataItem of selectorItem.dataSource"
                                                   [nzLabel]="dataItem.label"
                                                   [nzValue]="dataItem"></nz-option>
                                    </ng-container>-->
                                </nz-select>
                                <nz-date-picker *ngSwitchCase="'date'"
                                                class="input-item"
                                                [(ngModel)]="selectorItem.value"
                                                nzShowTime="false"></nz-date-picker>
                                <nz-date-picker *ngSwitchCase="'time'"
                                                class="input-item"
                                                [(ngModel)]="selectorItem.value"></nz-date-picker>
                                <nz-range-picker *ngSwitchCase="'dateRange'"
                                                 nzShowTime="false"
                                                 class="input-item"
                                                 [(ngModel)]="selectorItem.value"></nz-range-picker>
                                <nz-range-picker *ngSwitchCase="'timeRange'"
                                                 class="input-item"
                                                 [(ngModel)]="selectorItem.value"></nz-range-picker>
                                <ng-container *ngSwitchCase="'numberRange'">
                                    <div class="input-item">
                                        <nz-input-number style="width:45%"
                                                         [nzPlaceHolder]="'数量下界'"
                                                         [(ngModel)]="selectorItem.value['start']" [nzMin]="0"
                                                         [nzStep]="1"></nz-input-number>
                                        <span style="width:10%;display: inline-block;text-align: center;">~</span>
                                        <nz-input-number style="width:45%"
                                                         [nzPlaceHolder]="'数量上界'"
                                                         [(ngModel)]="selectorItem.value['end']" [nzMin]="0"
                                                         [nzStep]="1"></nz-input-number>
                                    </div>
                                </ng-container>
                                <ng-container *ngSwitchCase="'projects'">
                                    <!--ngDefaultControl-->
                                    <kylin-involved-project [(ngModel)]="selectorItem.value"></kylin-involved-project>
                                </ng-container>
                                <nz-cascader
                                    class="input-item"
                                    style="width: 100%;"
                                    [nzChangeOnSelect]="true"
                                    nzNotFoundContent="无匹配结果"
                                    [nzShowSearch]="selectorItem?.showSearch"
                                    [nzPlaceHolder]="selectorItem?.placeholder  || ('请选择' + selectorItem.label) || ''"
                                    *ngSwitchCase="'cascader'"
                                    [nzOptions]="selectorItem.dataSource"
                                    [(ngModel)]="selectorItem.value">
                                </nz-cascader>
                                <kylin-cascader-selector *ngSwitchCase="'customerCascader'"
                                                         ngDefaultControl
                                                         [options]="selectorItem.cascaderOptions"
                                                         [type]="selectorItem.cascaderType"
                                                         [(ngModel)]="selectorItem.value">
                                </kylin-cascader-selector>
                            </div>
                        </div>
                    </div>
                </ng-template>
                <div
                    *ngIf="_selectorGen.btnPosition === 'default' && index === splitSelector.length - 1 && _selectorGen.selectorArr.length % splitScale !== 0"
                    nz-col
                    [nzSpan]="24/splitScale"
                    [nzOffset]="(1- (_selectorGen.selectorArr.length % splitScale + 1)/splitScale) * 24">
                    <ng-container *ngTemplateOutlet="btnsTpl;context:{aloneLine:false}"></ng-container>
                </div>
            </ng-container>
        </div>
        <div *ngIf="_selectorGen.btnPosition === 'default' && (_selectorGen.selectorArr.length ) % splitScale === 0"
             style="width:400px;margin: 0 auto;">
            <ng-container *ngTemplateOutlet="btnsTpl;context:{aloneLine:true}"></ng-container>
        </div>
        <ng-template #btnsTpl let-aloneLine="aloneLine">
            <button nz-button class="query-button" nzType="primary" (click)="execQuery()"
                    [style.width]=" aloneLine ? '200px' : '100px'">
                查询
            </button>
        </ng-template>
    </div>
</div>
